<template>
	<div class="content">
		<div class="banner">
		</div>
		<!--云服务-->
		<div class="cloudServices">
			<p class="cloudServices-title">云服务</p>
			<ul class="clear cloudServices-ul">

				<router-link to="more" tag="li" class="cloud-details-a">
					<div class="cloud-details-left"></div>
					<div class="cloud-details-right">
						<span>存储</span>
						<p>多种存储类型<br> 高效、低成本、可靠的云存储服务</p>
					</div>
				</router-link>

				<router-link to="more" tag="li" class="cloud-details-a">
					<div class="cloud-details-left"></div>
					<div class="cloud-details-right">
						<span>计算</span>
						<p>专业安全的弹性计算服务提升运维效率助力企业核心业务创新</p>
					</div>
				</router-link>

				<router-link to="more" tag="li" class="cloud-details-b">
					<div class="cloud-details-left"></div>
					<div class="cloud-details-right">
						<span>安全</span>
						<p>简单、智能、安全<br>根据用户需求，定制多维度安全服务，建立产品安全防护体系</p>
					</div>
				</router-link>

				<router-link to="more" tag="li" class="cloud-details-b">
					<div class="cloud-details-left"></div>
					<div class="cloud-details-right">
						<span>大数据可视化</span>
						<p>利用的数据渲染技术，实现数据可视化实时交互，搭建专业的可视化应用</p>
					</div>
				</router-link>

				<router-link to="more" tag="li" class="cloud-details-b">
					<div class="cloud-details-left"></div>
					<div class="cloud-details-right">
						<span>数据处理</span>
						<p>提供数据清洗、数码转码<br>数据集成、数据托管等服务</p>
					</div>
				</router-link>

			</ul>
		</div>
		<!--视频服务-->
		<div class="radio">
			<div class="cloudServices">
				<p class="cloudServices-title">视频服务</p>
				<ul class="clear cloudServices-ul">
					<router-link to="/more" tag="li" class="cloud-details-c">
						<img src="../assets/u454.png" alt="">
						<div class="cloud-details-right">
							<span>视频内容分析</span>
							<p>借助AI技术，对视频进行语音、文字、图像、特体进行多维度智能分析，输出视频内容泛标签，从而提高搜索效率</p>
						</div>
					</router-link>

					<router-link to="/more" tag="li" class="cloud-details-c">
						<img src="../assets/u485.png" alt="">
						<div class="cloud-details-right">
							<span>色情识别</span>
							<p>对视频图像、视频中的语音、视频中的文字内容进行色情检测和过滤，杜绝产品涉黄风险</p>
						</div>
					</router-link>

					<router-link to="/more" tag="li" class="cloud-details-c">
						<img src="../assets/u490.png" alt="">
						<div class="cloud-details-right">
							<span>政治敏感识别</span>
							<p>对画面中人脸、语音、文字中出现的敏感信息，实现自动检测和识别，规避人物敏感期相关风险</p>
						</div>
					</router-link>

				</ul>
			</div>

		</div>
		<!--文字服务-->
		<div class="cloudServices textServices">
			<div>
				<p class="cloudServices-title ">文字服务</p>
				<ul class="clear cloudServices-ul textServices-ul">
					<router-link to="/more" tag="li" class="cloud-details-d">
						<img src="../assets/u495.png" alt="">
						<div class="cloud-details-right">
							<span>文字识别</span>
							<p>通过OCR识别功能，能够对多种场景下的图像文本进行分析识别，获取图像中的文字内容，提高工作效率</p>
						</div>
					</router-link>
				</ul>
			</div>
			<div>
				<p class="cloudServices-title ">图像服务</p>
				<ul class="clear cloudServices-ul textServices-ul">
					<router-link to="/more" tag="li" class="cloud-details-d">
						<img src="../assets/u505.png" alt="">
						<div class="cloud-details-right">
							<span>图像识别</span>
							<p>基于大数据和科学的算法模型，可精准识别图像中物体类别、物体标签。场景等不同维度信息</p>
						</div>
					</router-link>
				</ul>
			</div>
		</div>
		<!--语音服务-->
		<div class="radio">
			<div class="cloudServices">
				<p class="cloudServices-title">语音服务</p>
				<ul class="clear cloudServices-ul">
					<router-link to="/more" tag="li" class="cloud-details-d">
						<img src="../assets/u510.png" alt="">
						<div class="cloud-details-right">
							<span>语音识别</span>
							<p>提供高精度的语音识别服务，融合业界领先的自然语言处理技术，支持语音转文字、关键词检索等功能</p>
						</div>
					</router-link>
					<router-link to="/more" tag="li" class="cloud-details-d">
						<img src="../assets/u500.png" alt="">
						<div class="cloud-details-right">
							<span>语音合成</span>
							<p>将用户输入的文字转换成语音输出，打破传统的人机交互闭环，为企业客户提供定制自有领域个性化服务</p>
						</div>
					</router-link>
				</ul>
			</div>

		</div>
		<!--    -->
		<div class="nav">
			<ul class="nav_ul clear">
				<router-link to="/more" tag="li">
					<p>舆情监测</p>
					<div>先进的文本挖掘技术，7*24全网实时监测，洞察舆情目标网络表现</div>
				</router-link>

				<router-link to="/more" tag="li">
					<p>扫黄打非</p>
					<div>人工智能鉴黄技术，智能识别图片和视频中的色情和性感内容，有效规避您的业务涉黄风险</div>
				</router-link>

				<router-link to="/more" tag="li">
					<p>暴恐监测</p>
					<div>依托全网数据和深度神经网络技术,智能鉴别暴力恐怖血腥等内容，为您的产品保驾护航，远离涉暴涉恐风险</div>
				</router-link>

				<router-link to="/more" tag="li">
					<p>数据采集</p>
					<div>颠覆传统采集弊端，无埋点采集技术，提高数据采集效率</div>
				</router-link>

				<router-link to="/more" tag="li">
					<p>搜索服务</p>
					<div>整合目前所有与搜索引擎相关的项目，为实现在搜索引擎上的特定展示效果而围绕搜索引擎所开展的专业化、系统化并给客户带来更多核心价值的服务体系</div>
				</router-link>
			</ul>
		</div>

	</div>
</template>

<script>
export default {
    created() {
        this.menu();
    },
    methods: {
        menu() {
            window.scrollTo(0, 0);
        }
    }
};
</script>
<style lang="scss" scoped>
.clear:after {
    display: block;
    clear: both;
    content: "";
}

.content {
    min-width: 1200px;

    background-color: #fff;
    .banner {
        width: 100%;
        height: 350px;
        background: url("../assets/banner5.png") no-repeat center;
        background-size: auto 100%;
    }

    .cloudServices {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 30px;

        .cloudServices-title {
            font-size: 18px;
            font-weight: bolder;
            line-height: 3;
        }
        .cloudServices-ul {
            width: 100%;
            border-right: 1px solid #e9e9e9;
            border-bottom: 1px solid #e9e9e9;
            & > li {
                float: left;
            }
            & > .cloud-details-a {
                width: 599px;
                height: 150px;
                border: 1px solid #e9e9e9;
                border-bottom: 0px;
                display: flex;
                border-right: 0px;
                & > .cloud-details-left {
                    width: 35%;
                }
                & > .cloud-details-left {
                    background: url("../assets/u458.png") center no-repeat;
                }
                & > .cloud-details-right {
                    width: 65%;
                    text-align: center;
                    span {
                        padding: 3px 10px;
                        border-bottom: 3px solid #0c569a;
                        color: #0c569a;
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 20px;
                        margin-top: 20px;
                        display: inline-block;
                    }
                    p {
                        width: 55%;
                        margin: 0 auto;
                        font-size: 13px;
                        line-height: 2;
                    }
                }
            }
            & > .cloud-details-b {
                width: 399px;
                height: 182px;
                border: 1px solid #e9e9e9;
                border-bottom: 0px;
                border-right: 0px;
                display: flex;
                & > .cloud-details-left {
                    width: 35%;
                }
                & > .cloud-details-left:nth-child(1) {
                }
                & > .cloud-details-right {
                    width: 65%;
                    text-align: center;
                    span {
                        padding: 3px 10px;
                        border-bottom: 3px solid #0c569a;
                        color: #0c569a;
                        font-size: 18px;
                        font-weight: bold;
                        margin-bottom: 20px;
                        margin-top: 20px;
                        display: inline-block;
                    }
                    p {
                        width: 75%;
                        margin: 0 auto;
                        font-size: 13px;
                        line-height: 2;
                    }
                }
            }
            .cloud-details-a:nth-child(1) > .cloud-details-left {
                background: url("../assets/u458.png") no-repeat center;
            }
            .cloud-details-a:nth-child(2) > .cloud-details-left {
                background: url("../assets/u460.png") no-repeat center;
            }
            .cloud-details-b:nth-child(3) > .cloud-details-left {
                background: url("../assets/u462.png") no-repeat center;
            }
            .cloud-details-b:nth-child(4) > .cloud-details-left {
                background: url("../assets/u464.png") no-repeat center;
            }
            .cloud-details-b:nth-child(5) > .cloud-details-left {
                background: url("../assets/u466.png") no-repeat center;
            }
            & > .cloud-details-c {
                width: 399px;
                height: 235px;
                border: 1px solid #e9e9e9;
                border-bottom: 0px;
                border-right: 0px;
                padding: 15px 15px 15px 20px;
                background-color: #fff;
                & > img {
                    width: 180px;
                }
                & > .cloud-details-right {
                    span {
                        display: block;
                        font-size: 18px;
                        line-height: 3;
                    }
                    p {
                        font-size: 13px;
                        line-height: 1.5;
                    }
                }
            }
            & > .cloud-details-d {
                width: 599px;
                height: 210px;
                border: 1px solid #e9e9e9;
                border-bottom: 0px;
                border-right: 0px;
                padding: 15px 15px 15px 20px;
                background-color: #fff;
                & > img {
                    width: 180px;
                }
                & > .cloud-details-right {
                    span {
                        display: block;
                        font-size: 18px;
                        line-height: 2;
                    }
                    p {
                        font-size: 13px;
                        line-height: 1.5;
                    }
                }
            }
        }
        .textServices-ul {
            border: 0px;
            & > li {
                border: 0px !important;
                padding: 15px 0px 15px 35px !important;

                p {
                    width: 80%;
                }
            }
            & > .cloud-details-b {
            }
        }
        .textServices-ul:last-child {
            border-left: 1px solid #e9e9e9;
        }
    }
    .radio {
        width: 100%;
        background-color: #f8fafc;
    }
    .textServices {
        display: flex;
    }

    .nav {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 30px;
        .nav_ul {
            & > li {
                width: 360px;
                height: 250px;
                border: 1px solid #e9e9e9;
                float: left;
                margin-right: 59px;
                margin-top: 30px;
                text-align: center;
                p {
                    font-size: 18px;
                    line-height: 3;
                    font-weight: bold;
                    text-align: center;
                    margin-top: 30px;
                }
                div {
                    width: 70%;
                    margin: 0 auto;
                    font-size: 15px;
                    line-height: 1.8;
                }
            }
            & > li:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
}
</style>
